<!doctype html>
<html>
	<head>
		<title>TinFolio</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
		<meta name="author" content="7inpham@gmail.com" />
		<link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
	</head>
	<body>
		<div class="wrapper">
			<div class="navigation">
				<a class="logo"><span style="color: #090A0A">Tin</span><span style="color: #00ADEE;">Folio</span></a>
				<button class="button"><a href="index.html">list</a></button>
				<button class="button" onclick="showEditor()">new</button>
			</div>

			<div id="list" style="display: none">
				<div id="notes"></div>
				<p><a href="javascript:list(keepCursor)" id="more-button">more</a></p>
				<input type="hidden" id="cursor"/>
			</div>

			<div id="file" style="display: none"></div>

			<div id="editor" style="display: none">
				<h2>Compose</h2>
				<form>
					<label>Title</label>
					<input type="text" id="t-text"/>
					<label>First lines (in Markdown format)</label>
					<textarea id="f-area" class="div-editor" onkeydown="resizeTextArea(this)"></textarea>
					<label>Main lines (in Markdown format)</label>
					<textarea id="m-area" class="div-editor" onkeydown="resizeTextArea(this)"></textarea>
					<button class="button">preview</button>
					<button class="button" onclick="save(document.getElementById('key').value)">save</button>
					<button class="button" onclick="del(document.getElementById('key').value)">delete</button>
					<input type="hidden" id="key"/>
				</form>
			</div>
		</div>

		<div class="footer">&copy; 2014 Folio of <a href="mailto:7inpham@gmail.com">7inpham</a></div>

		<script src="js/marked.js"></script>
		<script>
			var keepCursor = "";
			function init() {
				//var apisToLoad = 2;
				var apisLoaded = function() {
					//if (--apisToLoad == 0) {
					//gapi.auth.authorize({
					//client_id: "853397935823-e3ic2mlau9adohh29bh5f99e5lqbsk1l.apps.googleusercontent.com",
					//scope: SCOPES,
					//immediate: true
					//}, function() {
					//gapi.client.oauth2.userinfo.get().execute(function(resp) {
					//if (!resp.code) {
					list();
					//}
					//});
					//});
					//}
				};
				var ROOT = 'https://secretcuz.appspot.com/_ah/api';
				//var ROOT = 'http://127.0.0.1:8888/_ah/api';
				gapi.client.load('noteapi', 'v1', apisLoaded, ROOT);
				//gapi.client.load('oauth2', 'v2', apisLoaded);
			}

			function list(cursor) {
				document.getElementById('list').style.display = 'block';
				document.getElementById('file').style.display = 'none';
				document.getElementById('editor').style.display = 'none';
				if (!cursor || cursor === "") {
					gapi.client.noteapi.noteEndpoint.listNote().execute(function(response) {
						if (response && response.items) {
							var html = "";
							for (var i = 0; i < response.items.length; i++) {
								var note = "<div class='note'>";
								note += "<h2><a href='javascript:load(" + response.items[i].id + ")'>" + response.items[i].title + "</a>";
								note += " <a href='javascript:load(" + response.items[i].id + ", true)'>Edit</a></h2>";
								if (response.items[i].shortContent) {
									note += marked(response.items[i].shortContent);
								}
								note += "</div>"
								html += note;
							}
							document.getElementById("notes").innerHTML = html;
							document.getElementById('cursor').value = response.nextPageToken;
							keepCursor = response.nextPageToken;
						}
					});
				} else {
					gapi.client.noteapi.noteEndpoint.listNote({cursor: cursor}).execute(function(response) {
						if (response && response.items) {
							var html = "";
							for (var i = 0; i < response.items.length; i++) {
								var note = "<div class='highlight-1'>";
								note += "<div class='column-1024-justify'>";
								note += "<h2><a href='javascript:load(" + response.items[i].id + ")'>" + response.items[i].title + "</a></h2>";
								note += "<a href='javascript:load(" + response.items[i].id + ", true)'>Edit</a>";
								note += "</div></div>";
								note += "<div class='column-1024-justify'>";
								if (response.items[i].shortContent) {
									note += marked(response.items[i].shortContent);
								}
								note += "</div>";
								html += note;
							}
							document.getElementById("notes").innerHTML += html;
							keepCursor = response.nextPageToken;
						} else {
							document.getElementById("more-button").style.display += 'none';
						}
					});
				}
			}

			function load(id, editable) {
				if (!editable) {
					document.getElementById('list').style.display = 'none';
					document.getElementById('file').style.display = 'block';
					document.getElementById('editor').style.display = 'none';
					gapi.client.noteapi.noteEndpoint.getNote({id: id}).execute(function(response) {
						var note = "<div class='highlight-1'>";
						note += "<div class='column-1024-justify'>";
						note += "<h2><a href='javascript:load(" + response.id + ")'>" + response.title + "</a></h2>";
						note += "</div></div>";
						note += "<div class='column-1024-justify'>";
						if (response.content) {
							note += marked(response.content);
						}
						note += "</div>";
						document.getElementById("file").innerHTML = note;
					});
				} else {
					document.getElementById('list').style.display = 'none';
					document.getElementById('file').style.display = 'none';
					document.getElementById('editor').style.display = 'block';
					gapi.client.noteapi.noteEndpoint.getNote({id: id}).execute(function(response) {
						document.getElementById('key').value = response.id;
						document.getElementById('t-text').value = response.title;
						document.getElementById('f-area').value = response.shortContent;
						document.getElementById('m-area').value = response.content;
						resizeTextArea(document.getElementById('f-area'));
						resizeTextArea(document.getElementById('m-area'));
					});
				}
			}

			function del(id) {
				gapi.client.noteapi.noteEndpoint.removeNote({id: id}).execute(function(response) {
					console.log(response);
					alert("Deleted");
					list();
				});
			}

			function save(id) {
				var t_text = document.getElementById('t-text').value;
				var f_lines = document.getElementById('f-area').value;
				var m_lines = document.getElementById('m-area').value;
				if (!id || id === "") {
					gapi.client.noteapi.noteEndpoint.insertNote({title: t_text, shortContent: f_lines, content: m_lines, date: new Date()}).execute(function(response) {
						console.log(response);
						alert("Saved");
					});
				} else {
					gapi.client.noteapi.noteEndpoint.updateNote({id : id, title: t_text, shortContent: f_lines, content: m_lines, date: new Date()}).execute(function(response) {
						console.log(response);
						alert("Updated");
					});
				}
			}

			function resizeTextArea(target) {
				target.style.height = '0px'; // reset height, so that it not only grows but also shrinks
				target.style.height = (target.scrollHeight - 10) + 'px'; // set new height
			}

			function showEditor() {
				document.getElementById('list').style.display = 'none';
				document.getElementById('file').style.display = 'none';
				document.getElementById('editor').style.display = 'block';
				document.getElementById('key').value = '';
				document.getElementById('t-text').value = '';
				document.getElementById('f-area').value = '';
				document.getElementById('m-area').value = '';
			}
		</script>
		<script src="https://apis.google.com/js/client.js?onload=init"></script>
	</body>
</html>
